<template>
  <div class="type-container">
    <span id="welcome"></span>
    <div class="more-info">
      <el-link
        target="blank"
        href="https://async-github-io.vercel.app/"
        >实验室网站</el-link
      >
      <el-link target="blank" href="https://github.com/Async-Lab"
        >github地址</el-link
      >
    </div>
  </div>
</template>

<script>
import Typed from 'typed.js'

export default {
  data() {
    return {}
  },
  mounted() {
    new Typed('#welcome', {
      strings: [
        'Async-Lab\n异步开发实验室\n欢迎每一个热爱开发的人\n加入我们',
        'Welcome to Async-Lab\n欢迎来到异步开发实验室\n加入我们一起探索开发的世界',
        '本网站由异步开发实验室学习使用，更多内容请访问异步开发实验室网站',
        '在这里你可以探索各种开发技术，有什么好玩的项目都可以加进来'
      ],
      typeSpeed: 100,
      backSpeed: 30,
      loop: true
    })
  }
}
</script>

<style scoped>
#welcome {
  height: 80px; /* 调整高度以适应折行后的文本 */
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
  white-space: pre-wrap; /* 允许文本折行 */
}
.type-container {
  width: 200px;
  position: relative;
  transform: translateY(10px); /* 向下位移以适应标题位置 */
}
.more-info {
  width: 100%;
  font-size: 14px;
  color: #666;
  position: absolute;
  bottom: 20px;
}
.el-link {
  margin-left: 28px;
}
</style>
